<!-- 文件预览模态框组件 -->
<template>
  <!-- 使用 ant-design-vue 的模态框组件 -->
  <a-modal
    :visible="visible"
    @update:visible="handleVisibleChange"
    :title="file?.fileName"
    :footer="null"
    :width="1000"
    :centered="true"
    class="preview-modal"
    :destroyOnClose="true"
  >
    <!-- 图片预览部分 -->
    <div v-if="isImage" class="preview-container image-preview">
      <img :src="file?.fileUrl" :alt="file?.fileName" />
    </div>

    <!-- 视频预览部分 -->
    <div v-else-if="isVideo" class="preview-container video-preview">
      <video controls :src="file?.fileUrl" class="video-player">您的浏览器不支持视频播放</video>
    </div>

    <!-- 音频预览部分 -->
    <div v-else-if="file?.fileType === 2" class="preview-container audio-preview">
      <!-- 音频播放器容器 -->
      <div class="audio-player-wrapper">
        <audio ref="audioPlayer" class="audio-player">
          <source :src="file.fileUrl" type="audio/mp3" />
          您的浏览器不支持音频播放。
        </audio>
      </div>
      <!-- 音频信息显示 -->
      <div class="audio-info">
        <img :src="audioIcon" alt="audio" class="audio-icon" />
        <span class="audio-name">{{ file.fileName }}</span>
      </div>
    </div>

    <!-- PDF预览部分 -->
    <div v-else-if="file?.fileType === 4" class="preview-container pdf-preview">
      <iframe :src="file.fileUrl" frameborder="0" class="pdf-viewer"></iframe>
    </div>

    <!-- Office文档预览部分（包括PDF、Word、Excel等） -->
    <div v-else-if="isOfficeFile" class="preview-container office-preview">
      <iframe
        :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(file.fileUrl)}`"
        frameborder="0"
        class="office-viewer"
        sandbox="allow-scripts allow-same-origin allow-forms"
        referrerpolicy="no-referrer"
      >
      </iframe>
    </div>

    <!-- 代码文件预览部分 -->
    <div v-else-if="file?.fileType === 8" class="preview-container code-preview">
      <pre class="code-content">{{ textContent }}</pre>
    </div>

    <!-- 文本文件预览部分 -->
    <div v-else-if="file?.fileType === 7" class="preview-container text-preview">
      <pre v-if="textContent" class="text-content">{{ textContent }}</pre>
      <div v-else class="loading-tip">
        <a-spin />
        <p>加载中...</p>
      </div>
    </div>

    <!-- 其他不支持预览的文件类型（只有压缩包） -->
    <div v-else-if="file?.fileType === 9" class="preview-container unsupported-preview">
      <img :src="getFileIcon(file?.fileType)" alt="file" class="file-icon" />
      <p class="file-name">{{ file?.fileName }}</p>
      <p class="file-tip">压缩文件暂不支持预览，请下载后查看</p>
      <a-button type="primary" @click="handleDownload">下载文件</a-button>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  // 导入所需的组件和工具
  import { computed, ref, onMounted, watch, nextTick } from 'vue'
  import { message } from 'ant-design-vue'
  import Plyr from 'plyr' // 引入播放器组件
  import 'plyr/dist/plyr.css' // 引入播放器样式
  // 导入各种文件类型的图标
  import docIcon from '@/assets/files/doc.png'
  import excelIcon from '@/assets/files/excel.png'
  import txtIcon from '@/assets/files/txt.png'
  import codeIcon from '@/assets/files/code.png'
  import zipIcon from '@/assets/files/zip.png'
  import otherIcon from '@/assets/files/其他.png'
  import audioIcon from '@/assets/files/音乐.png'
  import { getFileUsingGet } from '@/api/wenjianmokuai' // 修改导入

  // 定义组件的属性
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false, // 控制模态框显示状态
    },
    file: {
      type: Object,
      default: () => ({}), // 文件信息对象
    },
  })

  // 定义组件的事件
  const emit = defineEmits(['update:visible', 'download'])

  // 计算属性：判断文件类型
  const isImage = computed(() => props.file?.fileType === 3) // 是否为图片
  const isVideo = computed(() => props.file?.fileType === 1) // 是否为视频
  const isOfficeFile = computed(() => {
    const type = props.file?.fileType
    return type === 5 || type === 6 || type === 4 // Word、Excel或PDF文件
  })

  // 文本内容
  const textContent = ref('')

  // 处理模态框显示状态变化
  const handleVisibleChange = (value: boolean) => {
    emit('update:visible', value)
  }

  // 根据文件类型获取对应的图标
  const getFileIcon = (fileType: number) => {
    switch (fileType) {
      case 4:
        return docIcon // PDF文档
      case 5:
        return docIcon // Word文档
      case 6:
        return excelIcon // Excel文件
      case 7:
        return txtIcon // 文本文件
      case 8:
        return codeIcon // 代码文件
      case 9:
        return zipIcon // 压缩文件
      default:
        return otherIcon // 其他类型
    }
  }

  // 处理文件下载
  const handleDownload = () => {
    emit('download')
  }

  // 音频播放器引用
  const audioPlayer = ref(null)

  // 监听文件变化
  watch(
    () => props.file,
    async newFile => {
      // 音频文件处理
      if (newFile?.fileType === 2) {
        nextTick(() => {
          if (audioPlayer.value) {
            new Plyr(audioPlayer.value, {
              controls: ['play', 'progress', 'current-time', 'duration', 'mute', 'volume'],
            })
          }
        })
      }

      // 文本文件处理
      if ((newFile?.fileType === 7 || newFile?.fileType === 8) && newFile.fileId) {
        try {
          const res = await getFileUsingGet({
            fileId: newFile.fileId,
          })
          if (res.data?.code === 200) {
            textContent.value = res.data.data || '文件内容为空'
          } else {
            throw new Error(res.data?.message || '获取文件内容失败')
          }
        } catch (error) {
          console.error('加载文本内容失败:', error)
          message.error('文本内容加载失败')
          textContent.value = '加载失败，请重试或下载后查看'
        }
      } else {
        textContent.value = ''
      }
    },
    { immediate: true }
  )
</script>

<style scoped>
  /* 模态框样式 */
  .preview-modal {
    :deep(.ant-modal-content) {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
    }

    :deep(.ant-modal-body) {
      padding: 24px;
      min-height: 400px;
      max-height: 80vh;
      overflow: auto;
    }
  }

  /* 预览容器通用样式 */
  .preview-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* 图片预览样式 */
  .image-preview {
    img {
      max-width: 100%;
      max-height: 70vh;
      object-fit: contain;
    }
  }

  /* 视频预览样式 */
  .video-preview {
    .video-player {
      width: 100%;
      max-width: 800px;
      max-height: 70vh;
    }
  }

  /* 音频预览样式 */
  .audio-preview {
    padding: 60px 24px 40px; /* 增加上内边距到60px，确保时间提示完全显示 */
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* 音频播放器容器样式 */
  .audio-player-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

  /* 音频信息样式 */
  .audio-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
  }

  /* 音频图标样式 */
  .audio-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }

  /* 音频名称样式 */
  .audio-name {
    font-size: 16px;
    color: #333;
  }

  /* PDF预览样式 */
  .pdf-preview {
    width: 100%;
    height: 70vh;
  }

  .pdf-viewer {
    width: 100%;
    height: 100%;
    border: none;
  }

  /* Office文档预览样式 */
  .office-preview {
    width: 100%;
    height: 70vh;
  }

  .office-viewer {
    width: 100%;
    height: 100%;
    border: none;
  }

  /* 代码预览样式 */
  .code-preview {
    width: 100%;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 4px;
  }

  .code-content {
    width: 100%;
    max-height: 60vh;
    overflow: auto;
    margin: 0;
    padding: 16px;
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* 文本预览样式 */
  .text-preview {
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 4px;
    height: 70vh;
    overflow: hidden;
    display: flex;
  }

  .text-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #333;
  }

  .loading-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    gap: 16px;
  }

  /* 滚动条样式 */
  .text-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .text-content::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 3px;
  }

  .text-content::-webkit-scrollbar-track {
    background: #f5f7fa;
  }

  .text-content::-webkit-scrollbar-corner {
    background: #f5f7fa;
  }

  /* 不支持预览的文件样式 */
  .unsupported-preview {
    text-align: center;
    padding: 48px;

    .file-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 16px;
    }

    .file-name {
      font-size: 16px;
      color: #333;
      margin-bottom: 8px;
    }

    .file-tip {
      color: #999;
      margin-bottom: 24px;
    }
  }

  /* Plyr播放器自定义样式 */
  :deep(.plyr) {
    width: 100%;
    --plyr-color-main: #409eff; /* 主题色 */
    --plyr-audio-controls-background: #f5f7fa; /* 控制栏背景色 */
    border-radius: 8px;
    overflow: hidden;
  }

  /* Plyr音频控制栏样式 */
  :deep(.plyr--audio .plyr__controls) {
    padding: 24px 16px 16px; /* 增加顶部内边距到24px */
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    background: #f5f7fa;
  }
</style>
